<template>
    <el-card>
        <div class="search-bar">
            <el-button type="primary" @click="newCateFlag=true">添加新分类</el-button>
        </div>
        
        <ZkTable border show-index :expand-type="false" :selection-type="false"
            :data="categories" 
            :columns="columns" 
        >
            <template #delete="{row}">
                <i v-if="row.cat_deleted" class="el-icon-error"></i>
                <i v-else class="el-icon-success"></i>
            </template>
            <template #sort="{row}">
                <el-tag :type="tag[row.cat_level]['type']" size="small">{{ tag[row.cat_level]['label'] }}</el-tag>
            </template>
            <template #edit>
                <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
            </template>
        </ZkTable>

        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20, 25, 30]"
            :current-page="params.pagenum"
            :page-size="params.pagesize"
            :total="total"
        >
        </el-pagination>

        <el-dialog title="添加新分类" :visible.sync="newCateFlag">
            <el-form label-width="100px">
                <el-form-item label="分类名称">
                    <el-input v-model="newCate.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader style="width:100%" clearable v-model="newCate.cat_pid"
                        :options="levelCates"
                        :props="{ label:'cat_name', value:'cat_id' ,checkStrictly:true }"
                    ></el-cascader>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="newCateFlag = false">取 消</el-button>
                <el-button type="primary" @click="addNewCateFun()">确 定</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
import ZkTable from 'vue-table-with-tree-grid'
export default {
    components:{
        ZkTable
    },
    data() {
        return {
            columns:[
                { label:"分类名称",prop:"cat_name"},
                { label:"是否有效",prop:"cat_delete",type:"template",template:"delete" },
                { label:"排序",prop:"cat_level",type:"template",template:"sort" },
                { label:"操作",prop:"",type:"template",template:"edit" }
            ],
            tag:[
                { type: 'primary', label: '一级' },
                { type: 'success', label: '二级' },
                { type: 'warning', label: '三级' }
            ],
            params:{
                pagenum:6,
                pagesize:5
            },
            total:0,
            categories:[],
            // -----------------
            newCateFlag:false,
            levelCates:[],
            newCate:{
                cat_name:"",
                cat_pid:[],
                cat_level:0
            }
        }
    },
    methods:{
        async findAllCategories(){
            let data = await this.$api.loadCategoriesList(this.params);
            this.categories = data.result;
            this.total = data.total;
        },
        async findLevelCategories(){
            let data = await this.$api.loadCategoriesList({
                type:2
            });
            // console.log(data);
            this.levelCates = data;
        },
        async addNewCateFun(){
            let params = {};
            params.cat_name = this.newCate.cat_name;
            let leg = this.newCate.cat_pid.length;
            params.cat_level = leg
            params.cat_pid = leg==0?0:this.newCate.cat_pid[leg-1]
            console.log(params);
            // 发送异步请求进行数据加载
            let data = await this.$api.addNewCategories(params);
            if(!data) return;
            this.findAllCategories();
            this.findLevelCategories();
            this.newCate = {
                cat_name:"",
                cat_pid:[],
                cat_level:0
            }
            this.newCateFlag = false;
        }
    },
    created(){
        this.findAllCategories();
        this.findLevelCategories();
    }
};
</script>

<style lang="less" scoped>
.search-bar {
    margin-bottom: 20px;
    .el-input {
        width: 500px;
        margin-right: 30px;
    }
}
.el-pagination{
    margin-top: 20px;
}
.level-box{
    margin: 0px 30px;
    padding: 10px 0px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    align-items:center;
    &.a{
        border-top: 1px solid @text-placeholder;
        &:last-child{
            border-bottom: 1px solid @text-placeholder;
        }
    }
    &.b{
        margin: 0px;
        border-bottom: 1px solid @text-placeholder;
        &:last-child{
            border-bottom: none;
        }
    }
    .level-tag{
        margin: 0px 10px 10px 0px;
    }
}
.el-tree::v-deep [role="treeitem"]{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 4px 0px;
    margin: 2px 0px;
    border: 1px solid #ccc;
    >*{
        flex-grow: 1;
    }   
}
.el-icon-error,.el-icon-success{
    font-size: 24px;
}
.el-icon-error{
    color: @danger;
}
.el-icon-success{
    color: @success;
}
</style>